<template>
	<view class="cell" 
:style="{backgroundColor: back, padding: `${padVert} ${padHor}`, borderTop: borderBottom?'solid 1px gray;':'', borderBottom: border?'solid 1px gray;':'', 
marginLeft: marginHor, marginRight: marginHor}">
		<image v-if="icon!=''" :src="icon" mode="widthFix" :style="{width: iconSize, height: iconSize,}"></image>
		<view class="title" :style="{textAlign: titleAlign, width: titleWidth, backgroundColor: titleBack, }">
			{{title}}
			<slot name="title"></slot>
		</view>
		<view class="content" :style="{flexGrow:expandContent==true?1:0, flexShrink:expandContent==true?1:0}">
			{{text}}
			<slot/>
		</view>
		<view class="right">
			{{rightText}}
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:'hg-cell',
		components:{
			
		},
		props:{
			icon: {type: String, default: '',},					// 图标
			iconSize: {type: String, default: '50rpx'},			// 图标大小A
			title: {type: String, default: ''},					// 标题文字
			titleBack: {type: String, default: 'transparent'},	// 标题背景
			titleWidth: {type: String, default:'150rpx'},		// 标题宽度
			titleAlign: {type: String, default: 'left'},		// 标题的对齐方式
			text: {type: String, default:''},					// 文字内容
			expandContent: {type: Boolean, default: true},		// 是否自动扩充内容填满空间
			back: {type: String, default: 'white'},				// 格子背景	
			rightText: {type: String, default: ''},				// 右侧文字内容
			padVert: {type: String, default: '10rpx'},			// 垂直内边距
			padHor: {type: String, default: '10rpx'},			// 水平内间距		
			url: {type: String, default: '#'},					// 跳转链接
			clickEffect:{type: String, default: ''},			// 点击的动态效果，''则为没有效果
			fixedHeight: {type: [Boolean, String], default: true},	// 是否固定高度以及固定的高度
			marginHor: {type: String, default: '0'},			// 水平外边距
			border: {type: Boolean, default: true},				// 是否有边框
			anyTap: {type: Boolean, default: true},				// 是否点击单元格任意位置都将点击事件传送给内容插槽
		},	
		data() {
			return {
				titleClass:{
					textAlign: this.titleAlign, 
					width: this.titleWidth, 
					backgroundColor: 'red',
				},
				contentClass:{
					flexGrow: this.expandContent?'1':'0', 
					flexShrink: this.expandContent?'1':'0',
				}
			};
		}
	}
</script>

<style scoped>
.cell{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.title{
	flex-shrink: 0;
	flex-grow: 0;
	font-size: 30rpx;
	font-weight: bold;
}

.right{
	flex-shrink: 0;
	flex-grow: 0;
}
</style>
